
一.vue安装创建目录说明
1.vue-cli 3.2.1安装
    npm install -g @vue/cli@3.2.1
2.安装完以后的测试
    vue --version
3.创建vue项目
    vue create demo1
    cd demo1
    npm run serve
4.目录结构说明
    .git (隐藏文件)  ==>git init
    node_modules    ==>项目所有依赖的包文件
    public          ==>本地服务的文件夹
        |index.html  --主页
    src             ==>工作目录
        |assets      -- 放入资源(图片,css)
        |components  -- 放入组件的
        |App.vue     --根组件
        |main.js     --项目的全局配置
    .gitignore      ==>不需要上传到仓库中的文件的配置
    babel.config.js ==>有关babel的配置
    package.json    ==>项目的基本配置说明
    README.md       ==>说明文件

*** 打开index.html ==>main.js ==>app.vue ***

5. .vue文件就是组件
三部分:
    template ==>放入html代码
    script   ==>放入js代码
    style    ==>放入css样式

<template>
    <div></div>  // 必须有一个父元素
</template>

二.模板语法和计算属性
1.数据
    <script>
        export default{
        data (){   //定义了数据
            return{
            str:"你好vue"
            }
        }
        }
    </script>
2.模板语法 
    {{ 数据 }}
3.计算属性
    computed:{

    }

三.vue指令
1.什么是指令
    在节点上带有v-xxx的内容
2.v-bind:value ,v-bind:img  
简写
    :value
3.v-on:click ,v-on:mouseover
简写
    @click 
4.v-text , v-html
5.虚拟dom
6.v-model:数据双向绑定
    双向绑定的原理:发布者==订阅者
7.v-once:也可以插入值,但不更新数据
8.v-if:条件渲染
9.v-for:列表渲染  v-for="item in shopCar" :key="item.key"
10.v-if和v-for结合使用

四.案例_简易购物车

五.组件
1.什么是组件
    扩展了html标签
    以.vue结尾的文件,都可以叫组件
2.组件的使用
    场景:把一个完整的项目,拆分成不同的功能模块
    使用:
    src
        |components  ==>放入组件的
**注意:组件首字母大写
    1》import Swiper from "./components/Swiper.vue";
    2》components:{
        Swiper
    }
    3》在template中使用Swiper
App.vue(父)用了Swiper和Footer(子)
3.组件的通信(传值)
    1》父组件  传  子组件    动态属性
        父组件:
            <子组件 :变量=数据></子组件>
        子组件:
            props:['变量']
    2》子组件  传  父组件 (自定义事件)   事件派发
        子组件:
            this.$emit("自定义事件名称",值)
        父组件:
            <FooterVue @changeStr="changeBtn"></FooterVue>
            methods:{
                changeBtn(s){
                  console.log(s);
                }
              }

    3》兄弟组件之间的传值
        弄一个公共的.js文件(实例化vue)--bus.js
            import Vue from "vue";
            export default new Vue;
        兄弟A:
            import bus from './bus'
            bus.$emit("changeaStr",this.aStr);
        兄弟B:
            import bus from './bus'
            bus.$on("changeaStr",function(data){
                console.log(data);
            })

***组件的传值,不能跳跃***

六.交互
1.axios
    下载:
        npm install axios --save
    在main.js引入axios
        import axios from 'axios'
        Vue.prototype.axios=axios
    使用:
        this.axios.get('http://localhost:8080/data.json').then()

2.生命周期(钩子函数)
    1》创建
    2》组件渲染
    3》修改数据
    4》销毁
使用地方:在一刷新(进入)页面的时候要请求接口

七.路由
1.什么是路由
    单页面应用(spa)
2.路由安装
    (*)router
3.路由完整流程
    1》template
        切换的内容:<router-view></router-view>
        跳转到哪:<router-link to="/"></router-link>
    2》创建跳转到组件的操作
        import Vue from 'vue'  ==>vue.js
        import VueRouter from 'vue-router' ==>vue-router.js
        import Home from '../components/Home'
        import Fav from '../components/Fav'
        import Config from '../components/Config'
    3》router/index.js
        {
            path: '/路径',
            component: 组件
        }
4.router-link配置
    <router-link ></router-link>

    --to:
        1》to='/home'
        2》:to="'/home'"
        3》:to='{path:"/home"}'
        4》:to='{
            path:"/home",
            query:{userId:123}
        }'
        5》:to="{name:'user',params:{userId:123} }"
         <!-- http://localhost:8080/fav?userId=123 -->
        补充,如何通过js方式进行跳转
            $router.push
            $router.replace
            $router.go
            $router.back
            $router.forward

    --tag:默认为a标记,可以修改
        1》tag="h1"
        2》tag="button"

    --router-link-active:默认触发的class类
***
官网:https://router.vuejs.org/zh/api/#to
5.router-view
    keep-alive
        vue内置的组件,能在组件切换过程中将状态保存在内存中,防止dom重复渲染
        把页面保存在内存中,记住输入的内容等
        使用  
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
        需求:有的页面需要保存,有的不需要
        include:包含哪个(name)
        exclude:不包含哪个(name)

6.router.js详解
    1》
        {
            path: '/',    //路径
            name:'a',     //名称:基本上做标识或者判断
            component: A  //访问对应组件
        }
    2》懒加载
        {
            path: '/about',   
            name:'about',     
            component:()=>import('./views/About.vue')
        }
    3》路由重定向
        {
            path:'*',
            redirect:A
        }
    4》路由嵌套
        children:[
            {
                path:"/xxx",
                component:xxx
            }
        ]
7.路由的传值
    this.$router 
    this.$route
    1》{
        path: '/b/:id',
        component:B,
        }   
    2》<router-link :to="{path:'/b',query:{aaa:123} }" tag="button">BBB</router-link>

八.vue_插件样式
github.com找插件==>直接搜索
1.安装 
    npm i vue-shares --save   //分享插件
    npm install swiper vue-awesome-swiper --save  //轮播图插件
2.引入
//分享插件
    import share from 'vue-shares'
    Vue.use(share)
    Vue.component('V-share',share)
//轮播图插件
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'
    Vue.use(VueAwesomeSwiper)
3.样式模块化和样式穿透
样式模块化
    <style scoped></style>
样式穿透
    父元素>>>子元素
     
九.样式中的stylus 
stylus的文件是.styl
style中的样式引入 @import '~@/assets/var.styl';
styuls语法 $bg=orange


十.Vuex-State-mapState 
1.vuex是状态管理
2.vuex使用 -State(单一状态树)==>放入数据
    {{ this.$store.state.cityName }}
3.辅助函数
    import { mapState } from "vuex";
    computed:mapState(['cityName'])
    computed:{
        ...mapState(['cityName'])
    }
4.修改state数据
    1》store/index.js 
    mutations: {
        changeStr(state){
        state.cityName=456;
        }
    }
    2》组件 
    <button @click="btn">按钮</button>
    import { mapState ,mapMutations} from "vuex";
    methods:{
        btn(){
          this.changeStr();
        },
        ...mapMutations(['changeStr'])
    }



********watch 用于数据监听  **********demo4

可以监听 
data里面的状态 
computed里面的计算属性  
props 父组件传递过来的数据
vuex 中的状态
  import { mapGetters } from 'vuex'
    computed: {
      ...mapGetters(["mapboxMap"]),
      mapboxMap1() {
        // return this.$store.state.mapbox.map;
        return this.mapboxMap;
      } 
    }, 
    watch: {
      mapboxMap1(newData, oldData) {
      }
    }


newValue 变化之后的值（新的值） oldValue 变化之前的值（旧的值）
    1》第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数
    2》第二个是deep:其值是true或false;确认是否深入监听。
    (一般监听时是不能监听到对象属性值的变化的,数组的值变化可以监听到,因此:数据的改变不需要使用深度watch)
    3》第三个是immediate:其值是true或false,确认是否以当前的初始值执行handler的函数

watch:{
   监听目标:{
    handler(newValue, oldValue) {
      
    },
    deep: true,
    immediate: true
   }
}


Vue+Node商城项目
一.短信验证码登录|注册
二.Vuex 
    地址管理
    订单管理
    购物车数据管理
三.router 
四.导航守卫(拦截)
五.支付,分享 

技术选型上为什么采用vue？
1.领导安排
2.vue合适
